<template>
    <div class="add-box">
        <h3>用户信息添加</h3>
        <a-form :model="formState" ref="formRef" :label-col="labelCol" :rules="rules" :wrapper-col="wrapperCol"
            layout="horizontal" style="max-width: 600px">
            <a-form-item ref="userName" label="用户名" name="userName">
                <a-input v-model:value="formState.userName" />
            </a-form-item>
            <a-form-item label="性别" name="gender">
                <a-radio-group v-model:value="formState.gender">
                    <a-radio value="m">男</a-radio>
                    <a-radio value="w">女</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="年龄" name="age">
                <a-input-number v-model:value="formState.age" />
            </a-form-item>
            <a-form-item label="手机号" name="phone">
                <a-input v-model:value="formState.phone" />
            </a-form-item>
            <a-form-item label="邮箱" name="email">
                <a-input v-model:value="formState.email" />
            </a-form-item>
            <a-form-item label="角色" name="identify">
                <a-select v-model:value="formState.identify" placeholder="请选择您的角色">
                    <a-select-option value="ordinary">普通用户</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="用户头像">
                <a-upload name="file" :max-count="1" action="/upload.do" accpet=".png, .jpeg" @change="handleChange"
                    list-type="picture-card">
                    <div>
                        <PlusOutlined />
                        <div style="margin-top: 8px">Upload</div>
                    </div>
                </a-upload>
            </a-form-item>
            <a-form-item label="操作时间" name="operateTime">
                <div>
                    <a-date-picker 
                        v-model:value="formState.operateTime" 
                        placeholder="请选择时间"
                        style="width: 100%"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </div>
            </a-form-item>
            <a-form-item label="备注" name="remark">
                <a-textarea :rows="4" v-model:value="formState.remark" />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="onSubmit">添加</a-button>
                <a-button style="margin-left: 10px" @click="resetForm" danger>重置</a-button>
                <a-button style="margin-left: 10px" @click="back">返回</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const formRef = ref();
let formState = reactive({
    userName: '',
    nickName: '',
    avatar: '',
    gender: '',
    phone: '',
    email: '',
    age: '',
    identify: 'ordinary',
    operateTime: '',
    status: false,
    remark: ''
})

const handleChange = info => {
    const { status, response } = info.file
    if (status === 'uploading') {
        message.loading('正在上传...');
        return;
    }
    if (status === 'done') {
        // Get this url from response in real world.
        message.success('上传成功');
        // 成功之后获取到图片地址，然后赋值给formState.avatar
    }
    if (status === 'error') {
        message.error('上传失败');
    }
};

const labelCol = {
    style: {
        width: '150px',
    },
};
const wrapperCol = {
    span: 14,
};

const onSubmit = ()=>{
    console.log(formState);
}

const resetForm = () => {
    formRef.value.resetFields();
};

const back = () => {
    router.back();
}

const rules = {
    userName: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'change',
        },
        {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur'
        }
    ],
    phone: [
        {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
        },
    ],
    age: [
        {
            required: true,
            message: '请输入年龄',
            trigger: 'blur'
        }
    ],

}
</script>

<style scoped></style>